import { QuestionCircleOutlined } from '@ant-design/icons';
import {
  ActionType,
  PageContainer,
  ProColumns,
  ProTable,
} from '@ant-design/pro-components';
import { Access } from '@umijs/max';
import { Button, Popconfirm } from 'antd';
import { useRef, useState } from 'react';
import { useAccess } from '@umijs/max';
import { deletePost, queryPostList, } from '@/services/system/SystemController';
import PostForm from './postForm';

const HomePage: React.FC = () => {
  const access = useAccess();
  const actionRef = useRef<ActionType>();
  const [data, setData] = useState<number | undefined>(undefined);
  const columns: ProColumns<System.PostInfo>[] = [
    { title: '岗位名称', dataIndex: 'name' },
    { title: '岗位编码', dataIndex: 'key' },
    // {
    //   title: '数据权限', dataIndex: 'data_scope', search: false, responsive: ['md'],
    //   valueEnum: {
    //     1: { text: '所有数据' },
    //     3: { text: '本部门及以下数据' },
    //     4: { text: '本部门数据' },
    //     5: { text: '仅本人数据' },
    //   },
    // },
    { title: '岗位描述', dataIndex: 'description', ellipsis: true, search: false, responsive: ['md'], },
    {
      title: '岗位状态',
      dataIndex: 'status',
      width: "20%",
      valueType: "select",
      valueEnum: {
        true: { text: '启用', status: 'Success' },
        false: { text: '停用', status: 'Error' },
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: "20%",
      render: (_, record) => (
        <>
          <Button size="small" type="link" onClick={() => setData(record.id)} > 修改 </Button>
          <Access accessible={access.system.role.delete}>
            <Popconfirm title="确定删除?" icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
              onConfirm={async () => { await deletePost(record.id); actionRef.current?.reload(); }}>
              <Button size="small" type="text" danger>删除</Button>
            </Popconfirm>
          </Access>
        </>
      ),
    },
  ];
  return (
    <PageContainer ghost breadcrumbRender={false} header={{ extra: <Button type="primary" onClick={() => setData(0)} key={0} title='新增'>新增</Button> }}>
      <ProTable
        actionRef={actionRef}
        search={{ filterType: "light" }}
        rowKey="id"
        columns={columns}
        options={{ density: false, setting: false }}
        request={(q) => queryPostList(q)}
        pagination={{ defaultPageSize: 15, showSizeChanger: true, pageSizeOptions: [10, 15, 20, 25, 30, 50] }}
      />
      <PostForm id={data} onClose={() => setData(undefined)} onFinsish={() => actionRef.current?.reload()} />
    </PageContainer>
  );
};

export default HomePage;
